since I use several similar mat-inputs inside a template form, I define an ng-template for these mat-inputs and refer to it via *ngTemplateOutlet and also pass related data to the template as bellow:
<ng-template #formFieldInput let-hintMsg="hintMsg" let-lable="lable" let- dataBinding="dataBinding">
<mat-form-field appearance="outline" class="fa">
<mat-label>{{lable}}</mat-label>
<input matInput type="text" name="nationalCode"
[(ngModel)]="dataBinding" [disabled]="!personalInfoEdit"/>
<mat-hint *ngIf="personalInfoEdit">{{hintMsg}}</mat-hint>
</mat-form-field>
</ng-template>
// ...
<ng-container *ngTemplateOutlet="formFieldInput; context:{hintMsg: 'Enter National Code', lable: 'National Code', dataBinding: profileDetails.nationalCode} ">
</ng-container>but I got this error:
[webpack-dev-middleware] Error: Cannot assign value "$event" to template variable "dataBinding". Template variables are read-only.
how can fix this problem? best regards